.chat {
  height: 100%;
  overflow: hidden;
  display: flex;

  .contacts {
    width: 240px;
    border-right: 1px solid var(--border-color);
    .userCard {
      width: 100%;
      padding: 12px;
      cursor: pointer;
    }
    .active {
      background-color: var(--shadow-color);
      border-left: 3px solid var(--color-primary);
    }
    :global {
      .semi-badge {
        width: 100%;
        .semi-badge-rightTop {
          transform: translate(3%, 0%);
        }
      }
    }
  }
  .emptyContacts {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .conversations {
    flex: 1;
    border-right: 1px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
